<template>
  <div>
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="统计方式">
        <el-select v-model="searchForm.type" placeholder="统计方式">
          <el-option label="按日" :value="1"></el-option>
          <el-option label="按月" :value="2"></el-option>
          <el-option label="按年" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="searchForm.datetimerange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="custom-btn-primary" type="primary" @click="onSubmitSearch">查询</el-button>
<!--        <el-button class="custom-btn-primary" type="primary" @click="onSubmitSearch">导出</el-button>-->
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="">
      </el-table-column>
      <el-table-column
        v-for="(item,index) in moduleList"
        :key="'column_' + index"
        :prop="item.id"
        :label="item.name">
        <template slot-scope="scope">
          {{scope.row[item.id] ? scope.row[item.id].output : "-"}}
        </template>
      </el-table-column>
      <el-table-column label="总产量" label-class-name="custom-table-column-center">
        <el-table-column
          label="OK">
          <template slot-scope="scope">
            {{scope.row[summaryKey] ? scope.row[summaryKey].ok : "-"}}
          </template>
        </el-table-column>
        <el-table-column
          label="NG">
          <template slot-scope="scope">
            {{scope.row[summaryKey] ? scope.row[summaryKey].ng : "-"}}
          </template>
        </el-table-column>
        <el-table-column
          label="NA">
          <template slot-scope="scope">
            {{scope.row[summaryKey] ? scope.row[summaryKey].na : "-"}}
          </template>
        </el-table-column>
        <el-table-column
          label="总产量">
          <template slot-scope="scope">
            <el-button type="text" @click="openProductsWin(summaryKey)">{{scope.row[summaryKey] ? scope.row[summaryKey].output : "0"}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="合格率">
          <template slot-scope="scope">
            {{scope.row[summaryKey] ? scope.row[summaryKey].pass : "-"}}
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="dialog.products.title"
      :visible.sync="dialog.products.visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="custom-dialog"
      :append-to-body="true"
      :destroy-on-close="true"
      :body-style="{ maxHeight: 'calc(100vh - 210px)', overflow: 'auto' }"
      width="60%">
      <span>
        <Products v-if="dialog.products.visible" :key="productWinForm.id" :id="productWinForm.id" :beginTime="productWinForm.beginTime" :endTime="productWinForm.endTime"></Products>
      </span>
<!--      <span slot="footer" class="dialog-footer">
        <el-button class="custom-btn-cancel" @click="dialog.products.visible = false">关 闭</el-button>
      </span>-->
    </el-dialog>
  </div>
</template>

<script>

import dayjs from 'dayjs';
import {getModuleList, getReportData} from "../request/Api";
import {Message} from "element-ui";
import Products from "./Products";

export default {
  name: 'Report',
  components: {
    Products
  },
  data () {
    return {
      summaryKey: "-1",
      searchForm: {
        datetimerange: null,
        type: null
      },
      moduleList: [],
      tableData: [],
      dialog: {
        products: {
          title: "产品记录",
          visible: false
        }
      },
      productWinForm: {
        beginTime: null,
        endTime: null,
        id: null
      }
    }
  },
  created() {
    this.initSearchForm();
    this.getDriverModuleList();
  },
  mounted() {

  },
  methods: {
    onSubmitSearch() {
      this.getReportInfos();
    },
    openProductsWin(id) {
      if (!this.searchForm.datetimerange || this.searchForm.datetimerange.length != 2) {
        Message.error("请选择要查询的时间范围");
        return false;
      }
      this.productWinForm.id = id;
      let beginTime = this.searchForm.datetimerange[0];
      let endTime = this.searchForm.datetimerange[1];
      this.productWinForm.beginTime = beginTime;
      this.productWinForm.endTime = endTime;
      this.dialog.products.visible = true;
    },
    getReportInfos() {
      if (!this.searchForm.datetimerange || this.searchForm.datetimerange.length != 2) {
        Message.error("请选择要查询的时间范围");
        return false;
      }
      if (!this.searchForm.type) {
        Message.error("请选择统计方式");
        return false;
      }
      let beginTime = this.searchForm.datetimerange[0];
      let endTime = this.searchForm.datetimerange[1];
      getReportData({
        beginTime: beginTime,
        endTime: endTime,
        type: this.searchForm.type
      }).then(res => {
        if (res.code == 0) {
          let reports = res.data.reports;
          let dataList = [];
          for (let i = 0; i < reports.length; i++) {
            let da = {date: reports[i].date};
            for (let j = 0; j < reports[i].data.length; j++) {
              let d = {
                output: reports[i].data[j].output,
                ok: reports[i].data[j].ok,
                ng: reports[i].data[j].ng,
                na: reports[i].data[j].na
              };
              if (reports[i].data[j].id == this.summaryKey) {
                d.pass = ((reports[i].data[j].ok / reports[i].data[j].output) * 100).toFixed(2) + "%";
              }
              da[reports[i].data[j].id] = d;
            }
            dataList.push(da);
          }
          this.tableData = dataList;
        } else {
          Message.error(res.msg);
        }
      })
    },
    getDriverModuleList() {
      getModuleList({}).then(res => {
        if (res.code == 0) {
          this.moduleList = res.data.modules;
          this.getReportInfos();
        } else {
          Message.error(res.msg);
        }
      })
    },
    initSearchForm() {
      let firstDayOfMonth = dayjs().startOf('month');
      let startDay = firstDayOfMonth.format('YYYY-MM-DD');
      let endDay = dayjs().format('YYYY-MM-DD')
      this.searchForm.datetimerange = [startDay, endDay];
      this.searchForm.type = 1;
    }
  },
  beforeDestroy() {

  }
}
</script>

<style scoped>

</style>
